<template>
  <div class="topBoxB" ref="boxref">
    <div class="title">
      <span class="line"></span>
      <span><i class="el-icon-sort"></i> 位置信息</span>
      <el-button
        style="
          float: right;
          margin-left: 10px;
          margin-right: 10px;
          margin-top: 6px;
          color: #fff;
        "
        type="text"
        @click="printPdf"
        ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button
      >
    </div>
    <a-input-search
      v-model="searchkey"
      placeholder="输入关键词搜索"
      @search="init"
    />

    <div class="positionList" id="positionListid1" @scroll="handleScroll" ref="list">
      <div class="itemBox" @click="handleEdit(formateCard(item).msg.location)" v-for="(item,index) in tableData" :key="index">
        <img src="../../../assets/positionImg.png" width="50" height="50" alt="">
        <div class="positionInfo">
          <div>地址：{{ formateCard(item).msg.location._label }}{{formateCard(item).msg.location._poiname}}</div>
          <div>时间：{{ formateDate(item.msgtime) }}</div>
          <div>经纬度：[{{formateCard(item).msg.location._y}},{{formateCard(item).msg.location._x}}]</div>
          <div :title="item.sendername+' 发送给 '+ item.contactnick+'('+item.contactname+')'"><span style="color:red;">{{ item.sendername?item.sendername:item.sendernick }}</span> 发送给 <span style="color:red;">{{item.contactnick}}({{ item.contactname }})</span></div>
          <div><el-button style="font-size:12px;" type="text" @click.stop="jumpOrderPosition(item)" title="点击定位到聊天">定位到聊天</el-button></div>
        </div>
      </div>

      <div class="loadingBox" v-if="showLoading" style="color:#2196f3;margin-top:20px;"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
    </div>

    <!-- <el-table border height="630" stripe :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="位置标题" >
        <template slot-scope="scope">{{formateCard(scope.row).msg.location._label}}</template>
        </el-table-column>
      <el-table-column prop="date" label="位置详情" >
        <template slot-scope="scope">
          <div><i class="el-icon-office-building"></i> {{formateCard(scope.row).msg.location._poiname}}</div>
          <div>时间：{{formateDate(scope.row.msgtime)}}</div>
          <div>经纬度：[{{formateCard(scope.row).msg.location._y}},{{formateCard(scope.row).msg.location._x}}]</div>
        </template>
        </el-table-column>
      <el-table-column prop="name" label="发送人">
          <template slot-scope="scope">
          <span>{{scope.row.sendername}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(formateCard(scope.row).msg.location)">查看位置</el-button>
      </template>
    </el-table-column>
    <el-table-column label="标记" align="center">
          <template slot-scope="scope">
            <div class="badgeBox" v-if="scope.row.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" type="text" v-else @click="markOrder(scope.row)"  size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </template>
        </el-table-column>
    </el-table> -->

    <!-- <div class="block">
      <el-pagination
        :hide-on-single-page="total < limit"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="offset"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="limit"
        layout="total, sizes, prev, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div> -->

    <!-- position -->
    <a-modal
      width="420px"
      :maskClosable="false"
      :destroyOnClose="true"
      :getContainer="getRefsAff"
      v-model="modal2Visible"
      :title="title"
      centered
      @ok="() => (modal2Visible = false)"
    >
      <position v-if="position" :position="position" />
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>
<script>
import { getPosition } from "@/api/position/position_api";
import { parseTime } from "@/utils/index";
import position from "../map/gps.vue"
import { sendMarkOrderApi } from '@/api/markApi/index'

const x2js=require('x2js');
const x2jsone=new x2js(); //实例
export default {
  name: "weChatposition1",
  props: ["sendData"],
  components:{
    position
  },
  data() {
    return {
      scrollTopData:0,
      showLoading:false,
      showRemark:false,
      remark:'',
      id:'',
      modal2Visible:false,
      headerTitle: [],
      tableData: [],
      searchkey:"",
      offset: 1,
      limit: 20,
      total: 0,
      position:'',
      title:'',
      value:''
    };
  },
  watch: {
    "$store.state.account.position1": function () {
      if(this.sendData.list_offset){
        this.offset=1;
        this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1
    }
      this.init();
    },
  },
  created() {
    if(this.sendData.list_offset){
      this.offset=1;
        this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1
    }
    this.init();
  },
  methods: {
    jumpOrderPosition(item){
        // 为对象添加属性
        // item['proof_num'] = this.sendData.proof_num;
        // item['username'] = sessionStorage.getItem('usernameTitle');
        // item['model'] = 'wechat';
        // item['msgtime'] = item.msgtime;
        // item['contact_username'] = item.contactname;
        // item['id'] = item.id;
        // item['list_offset'] = 1;
        // item['msg_offset'] = 1;
        // item['app_name'] = item.contactname.includes('@')?'群组':'好友';

        item['proof_num'] = this.sendData.proof_num;
        item['username'] = sessionStorage.getItem('usernameTitle');
        item['model'] = 'wechat';
        item['msgtime'] = item.msgtime;
        item['contact_username'] = item.contactname;
        item['id'] = item.id;
        item['list_offset'] = this.offset;
        // item['list_offset'] = this.sendData.list_offset?this.sendData.list_offset:this.offset;
        item['msg_offset'] = 1;
        item['app_name'] = item.contactname.includes('@')?'群组':'好友';
        item['wxChildrenNode'] = true;
        item['scrollTop'] = this.scrollTopData;
        item['childrenModel'] = 'position';
        item['account_id'] = this.sendData.account_id;

        // 储存类型
        sessionStorage.setItem('model',"wechat"),
        // 储存节点数据
        sessionStorage.setItem('sumData',JSON.stringify(item))
        // 激活跳转组件
        this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
        sessionStorage.setItem('only',true);
    },
    handleScroll(){
      // 获取列表元素
      const list = this.$refs.list;
      this.scrollTopData = list.scrollTop;

      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
        this.showLoading=true;

        if(this.tableData.length<this.total){
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          this.offset++;
          // 加载更多数据
          let that = this;
          setTimeout(()=>{
            that.initPosition();
          },1000)
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    },
    getRefsAff(){
      return  this.$refs.boxref
    },
    handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        app_name:'',
        account_id:this.sendData.account_id,
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.init()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    handleEdit(row){
      this.title='地址： '+row._label+'-'+row._poiname
      this.position={
        _x:row._x,
        _y:row._y,
        _scale:row._scale,
        title:row._label+'-'+row._poiname
      }
      this.modal2Visible=true
    },
    // 格式化xml
    formateCard(item){
      try {
        let xml=item.contant;
        //  if(xml.indexOf(':')!==-1){
          // let str= xml.split(':')[1]
        let stt = xml.replace(/\n/g, '');
        let arrt = stt.replace(/\t/g, '');
          let a=x2jsone.xml2js(arrt)
          if(a.html){
            let s ={
                "msg": {
                    "location": {
                        "_x": "",
                        "_y": "",
                        "_scale": "",
                        "_label": "数据异常",
                        "_poiname": "",
                        "_infourl": "",
                        "_maptype": "0",
                        "_poiid": ""
                    }
                }
        }
        return s
          }else{
            return a

          }
      } catch (error) {
      }

      //   }else{
      //  let xmlDo=x2jsone.xml2js(xml);
      //   return xmlDo
      //   }
    },
    formateDate(date) {
      return parseTime(date);
    },
    init() {
      this.tableData = [];
      this.initPosition();
    },
    initPosition() {
      if(sessionStorage.getItem('searchAll')!==null){
            this.searchkey = sessionStorage.getItem('searchAll');
        }
      let data = {
        proof_num: this.sendData.proof_num,
        account_id: Number(this.sendData.account_id),
        model:this.sendData.model,
        searchkey:this.searchkey,
        offset:this.offset,
        limit:this.limit
      };
      getPosition(data).then((res) => {
        if(res.data.length == 0){
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return;
        }
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.tableData.push(element);
        }
        this.total = res.data[0].cnt;
        if(this.sendData.list_offset){
          this.$nextTick(() => {
            this.$refs.list.scrollTop=this.sendData.scrollTop;
          })
          this.offset = this.sendData.list_offset
          this.limit = 20;
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.init();
    },
     printPdf(){
        printJS({
          printable: 'positionListid1',// 直接传入元素 id
          type: 'html',
          targetStyles: ['*'],// 保留页面样式
          scanStyles: false,
          style:`.loadingBox{
  text-align: center;
  width:100%;
}
.positionInfo{
  width: 380px;
  padding-left:20px;
}
.itemBox{
  display: flex;
  min-height:100px;
  align-items: center;
  border-bottom:1px solid #ebebeb;
  cursor: pointer;
  font-size:12px;
  padding:10px;
}
.itemBox:hover{
  background:#e9e9e9;
}
.positionList{
  height: 90%;
  overflow-y: auto;
  padding-bottom:100px;
}
.positionList::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.positionList::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.positionList::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
  .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.topBoxB{
  width: 100%;
  position: relative;
}
.aTag {
  text-decoration: underline;
  color: rgb(34, 109, 248);
}
.aTag:hover {
  color: #4f00a8;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 20px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
`
});
    },
  },
};
</script>

<style scoped>

.loadingBox{
  text-align: center;
  width:100%;
}
.positionInfo{
  width: 380px;
  padding-left:20px;
}
.itemBox{
  display: flex;
  min-height:100px;
  align-items: center;
  border-bottom:1px solid #ebebeb;
  cursor: pointer;
  font-size:12px;
  padding:10px;
}
.itemBox:hover{
  background:#e9e9e9;
}
.positionList{
  height: 90%;
  overflow-y: auto;
  padding-bottom:100px;
}
.positionList::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.positionList::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.positionList::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
  .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.topBoxB{
  width: 100%;
  position: relative;
}
.aTag {
  text-decoration: underline;
  color: rgb(34, 109, 248);
}
.aTag:hover {
  color: #4f00a8;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 20px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}

</style>
